<template lang="pug">
div.cover-uploader
  div.cover-uploader-selector(
    @click='showModal = true')
    div.preview(v-if='cover', :style='`background-image: url(${cover})`')
      //- img.img-responsive(:src='cover')
    div.dropzone(v-else)
      Icon(type='plus', size=32)
      p 点击上传图片
  Modal.cover-uploader-modal(
    :title='title'
    v-model='showModal',
    width=500,
    :transfer='false'
    :loading='true'
    @on-ok='handleUpload'
    @on-cancel='reset'
    )
    div
      p.hint(style='margin-bottom: 8px; color: #666') 图片不允许涉及政治敏感与色情; 图片格式必须为：png,jpeg,jpg,gif；不可大于800k；建议使用png格式图片，以保持最佳效果
      Upload(ref='upload',
        multiple,
        action='javascript:;',
        accept='image/*',
        :format='["jpg", "jpeg", "png", "gif"]',
        :max-size='800',
        :show-upload-list='false',
        :before-upload='beforeUpload')
        Button(type='ghost', icon='ios-cloud-upload-outline') 选择图片
        //- div(item in uploadList)
        //- Progress(v-if="uploadItem.showProgress", :percent="uploadItem.percentage", hide-info)
      div(v-if='preview', style='margin-top: 8px')
        p 预览
        img.img-responsive(:src='preview')

</template>

<script>
import fileApi from '@/apis/file'
export default {
  props: {
    title: {
      type: String,
      default: '上传图片'
    },
    defaultCover: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      file: null,
      cover: this.defaultCover,
      preview: this.defaultCover,
      showModal: false
    }
  },
  methods: {
    beforeUpload (file) {
      this.file = file

      let reader = new FileReader()
      reader.onload = e => {
        this.preview = e.target.result
        this.$forceUpdate()
      }
      reader.readAsDataURL(file)

      return false
    },
    async handleUpload () {
      try {
        let data = {
          filename: [{ value: this.file.name }],
          data: [{ value: this.preview.replace(`data:${this.file.type};base64,`, '') }]
        }
        const res = await fileApi.uploadImage(data)
        if (res.status === 201 && res.data.fid[0].value) {
          this.$emit('on-upload', { id: res.data.fid[0].value, preview: this.preview })
          this.cover = this.preview
          this.showModal = false
        }
      } catch (e) {}
    },
    reset () {
      this.file = null
      this.preview = this.cover
    }
  }
}
</script>

<style lang="less">
.cover-uploader {

  &-selector {
    // padding: 20px 40px;
    width: 370px;
    height: 370px * 2/3;
    position: relative;
    overflow: hidden;
    color: #999;
    background-color: #f9f9f9;
    text-align: center;
    cursor: pointer;

    .dropzone {
      // flex: 1;
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      border: 1px dotted #ccc;
    }

    .preview {
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      &:before {
        display: none;
        content: '点击替换图片';
        padding: 100px 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        vertical-align: middle;
        color: #fff;
        background-color: rgba(0,0,0, .5);
      }
      &:hover:before {
        display: block;
      }
    }

    &:hover {
      background-color: #eee;
    }
  }

  .ivu-modal-body {
    padding: 30px;
  }
}
</style>
